<template>
	<!-- 我的 -->
	<view class="my">
		<!-- 顶部 -->
		<view class="my_header">
			<image class="my_headerbgimg" src="https://s4.ax1x.com/2022/01/26/7Lhm6S.png"></image>
			<image :style="{top:  `${menuButtonInfo.top+2}px`}" class="my_headericon" src="https://s4.ax1x.com/2022/01/27/7Ozfje.png">
			</image>
		</view>
		<view class="content">

			<!-- 名片 -->
			<view>
				<callingcard @goMyFans="goMyFans" @ff_isPopup=ffIsPopup :userObj="userObjs" :isPath="true" @updataShow="updataShow"
					@goCalendarPath="goCalendarPaths">
				</callingcard>
			</view>


			<view class="my_bodys">
				<!-- 特权 -->
				<view class="my_bodyLeft" @click="goMyPrivilege">
					<view class="my_bodyLeftItem my_bodyLeftItemFist">

						<span class="my_bodyLeftItemFistbox">
							<image src="https://s4.ax1x.com/2022/01/27/7Oz7Nt.png"></image>
							<span class="my_bodyLeftItemFistTitle">特权</span>
						</span>

						<image class="my_bodyLeftItemFistanniu" src="../../static/dian.png"></image>
						<view class="my_bodyLeftItemBorder"></view>
					</view>
					<view class="my_bodyLeftItem" v-for="(item,index) in myCoupon" :key="index">
						<view v-if="item">
							
								<view class="my_bodyLeftItemTlite">{{item.privilegeName}}</view>
								<view class="my_bodyLeftItemText">{{item.privilegeNameEn}}
								</view>
								<view class="my_bodyLeftItemDate">
									<span class="my_bodyLeftItemDateLeft">有效期至</span>
									<span>{{item.isText}}</span>
								</view>
							<view v-if="!item.isPass" class="newrecommend_leftboxboard">
								<p class="newrecommend_leftboxboardtitle">NOT</br>OWNED</p>
							</view>
						</view>
						<view v-else class="my_bodyLeftItemKong">
							空
						</view>
						<view class="my_bodyLeftItemBorderTop" v-if=""></view>
						<view class="my_bodyLeftItemBorder" v-if="index != 3"></view>
						
					</view>
				</view>
				<view class="my_bodyRight">
					<!-- 共创 -->
					<view class="my_bodyRightTop" @click="goParticipate">
						<view class="my_bodyRightTopTopone">
							<view class="my_bodyRightTopTop">
								<image class="my_bodyRightTopTopImg" src="https://s4.ax1x.com/2022/01/27/7OzH4P.png">
								</image>
								<span>
									进行中
								</span>
								<span class="my_bodyRightTopTophuis">/ 已完成</span>
							</view>
							<image class="my_bodyLeftItemFistanniu" src="../../static/dian.png"></image>
						</view>

						<view class="my_bodyRightTopBottom">
							<view class="swiper-item_box scroll_p_r" v-for="(item,index) in dynamicListss" :key="index">
								<view v-if="item">
									<view class="swiper-item_box_imgbox">
										<image class="swiper-item_box_imgboxitem"
											:src="item.imageList[0]" mode="aspectFill"></image>
										<view class="swiper-item_box_imgboxitem_tltlebox">
											<span class="swiper-item_box_imgboxitem_tltleboxtext" v-if="item.timeEnd != 0">{{item.timeEnd}}天</span>
											<span class="swiper-item_box_imgboxitem_tltleboxtext" v-if="item.timeEnd == 0">结束</span>
											<!-- <span class="swiper-item_box_imgboxitem_tltleboxtext" v-else>完成</span> -->
										</view>
									</view>
									<p class="swiper-item_box_title">{{item.activityName}}</p>
									<p class="swiper-item_box_furitle">{{item.activityName}}</p>
								</view>
								<view v-else class="swiper-item_boxkong">
									空
								</view>
								
							</view>
						</view>

					</view>
					<!-- 标签 -->
					<view class="my_bodyRightBottom" @click="goLabel">
						<view class="my_bodyRightTopTopone my_bodyRightBottss">
							<view class="my_bodyRightTopTop">
								<image class="my_bodyRightTopTopImg" src="https://s4.ax1x.com/2022/01/27/7OzL38.png">
								</image>
								<span>
									标签
								</span>
							</view>
							<image class="my_bodyLeftItemFistanniu" src="../../static/dian.png"></image>
						</view>
						<view class="mylabelbox">
							<view class="mylabels" v-for="(item,index) in nowLableList" :key="index">
								<span class="mylabels_red"></span>
								<span class="mylabelsitem">{{item.label}}</span>
							</view>
							<view class="mylabelboxkong" v-if="nowLableList.length == 0">空</view>
						</view>
						<view class="mylabels_addbox">
							<image class="mylabels_addimg" src="https://s4.ax1x.com/2022/01/27/7OzTAI.png"></image>
							<span class="mylabels_addtext">添加更多标签</span>
						</view>
					</view>
				</view>
			</view>
		</view>


		<perfectbox :img="imgs" pagepath="../my/setting/setting?login=1" :inviteCode="inviteCodex" :show="isShow"
			@ff_show="ffShows">
		</perfectbox>

		<u-popup v-model="isPopup" mode="center" border-radius="14">
			<view class="popBox">
				<image @click.stop="ffChacha" class="popCha" src="../../static/chacha.png" mode="widthFix"></image>
				<view class="conBox">
					<image :class="'conBoxImg'" :src="popObj.url" mode="widthFix">
					</image>
					<view class="conBoxTitle">{{popObj.title}}者</view>
					<text class="conBoxText">
						{{popObj.text}}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import falls from "@/components/falls/falls.vue";
	import fallsmy from "@/components/falls/fallsmy.vue";
	import mylabel from "@/components/mylabel/mylabel.vue";
	import empty from "../../components/defaultpage/empty.vue"
	import perfectbox from "../../components/perfectbox/perfectbox.vue";

	// mylabel
	// fallsmy
	import callingcard from "@/components/callingcard/callingcard.vue"
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 25
				},
				inviteCodex: '',
				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isShow: 2,
				dynamicNum: 1,
				pageSize: 8,
				userObjs: {},
				loadStatux: 'Loading',
				flowLists: [],
				isTrue: false,
				lists: [],
				proceedSum: 0,
				labelLists: [],
				userPhoneApi: '',
				imgs: "",
				isMember: "",
				isPopup: false,
				popObj: {
					url: "https://oss-images.lclook.com/upload/2021/09/23/1632382096258.png",
					title: "",
					text: ""
				},
				myPrivilegePageSize: 4,
				myPrivilegePageNum: 1,
				myCoupon: [],
				dynamicListss: [],
				nowLableList: []
			}
		},
		onLoad() {

			this.init();

			// debugger
			// this.addRandomData();
		},
		onReachBottom() {
			// debugger
			if (this.isTrue && this.flowLists.length != 0) {
				this.loadStatux = 'Loading';

				this.dynamicNum++;

				this.initFansDynamic();


			}

		},
		onShow() {


			this.isTrue = true;

			// debugger

			this.initUser();




		},
		computed: {
			isArise() {
				return this.$store.state.isArise;
			},
			Version() {
				return this.$store.state.Version;
			}
		},
		components: {
			fallsmy,
			callingcard,
			mylabel,
			perfectbox,
			empty,
		},

		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'chimian',
				path: '/pages/my/my'
			}
		},
		methods: {
			updataShow(data){
				// debugger
				
				this.isShow = data;
			},
			ffDay(end) {
				let stateTime = new Date().getTime();
				let endTime = new Date(end).getTime();
				let moveTime = endTime - stateTime;
				if (moveTime > 0) {
					let a = moveTime - 2626560000;
					if (a >= 0) {
						return (30 + new Date(a).getDate()) - 1;
					} else {
						return new Date(a).getDate() - 2
					}
				} else {
					return 0
				}
			},
			// 请求用户活动数据列表
			initMyDynamic() {
				let newDynamicListss = [];
				this.$apis.userActivityList(0).then(res => {
					if (res.rows.length != 0) {
						res.rows.forEach((item,index)=>{
							if(index < 2){
								let newItem = JSON.parse(JSON.stringify(item))
								let itemEnd = this.ffDay(newItem.timeEnd);
								
								newItem.timeEnd = itemEnd;
								
								newDynamicListss.push(newItem)
							}
						});
						if(newDynamicListss.length == 1){
							newDynamicListss = [...newDynamicListss,null];
						}
						this.dynamicListss = JSON.parse(JSON.stringify(newDynamicListss))
					} else {
                         this.dynamicListss = [null,null]
					}
					console.log('请求用户活动数据列表----->',this.dynamicListss)

				})
			},
			// 数组去重
			//  方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
			deWeight(arr) {
				var obj = {};
				let newArr = arr.reduce(function(item, next) {
					obj[next.idx] ? '' : obj[next.idx] = true && item.push(next);
					return item;
				}, []);
				return newArr;
			},
			ffShows() {
				this.isShow = 2;
			},

			goRegister() {
				uni.navigateTo({
					url: "../register/register"
				})
			},
			ffIsPopup(data) {
				// debugger
				this.popObj = data;
				// debugger
				this.isPopup = true;
			},

			goCalendarPaths() {
				// debugger
				uni.navigateTo({
					url: `myCalendar/myCalendar?face=${this.userObjs.amianCoin}`
				})
			},
			// initObj() {
			// 	return new Promise((rets, rejs) => {
			// 		this.isShow = 2;
			// 		this.$apis.accountInfo().then(res => {
			// 			if (res.data.version == this.Version) {

			// 				this.$store.commit('updataArise', true);
			// 			} else {
			// 				this.$store.commit('updataArise', false);
			// 			}
			// 			// debugger
			// 			if (res.code == 200) {
			// 				this.proceedSum = res.data.taskNum
			// 				this.activityId = res.activityId;
			// 				this.userObjs = res.data.user;
			// 				this.userObjs.verifier = res.data.user.roles.split(',')[1];
			// 				this.userObjs.Phone = res.data.phone;
			// 				this.isMember = res.data.isMember;
			// 				this.$store.commit('updatauserObj', this.userObjs);
			// 				// debugger
			// 				this.userPhoneApi = res.data.phone;
			// 				this.needInviteCode = res.data.needInviteCode
			// 				this.imgs = res.data.awardPrivilegeBg;


			// 				if (res.data.needInviteCode) {

			// 					if (res.data.inviteCode) {
			// 						this.inviteCodex = res.data.inviteCode.code;
			// 						if (!res.data.isMember) {
			// 							// debugger
			// 							this.isShow = 0
			// 							rets();
			// 						} else {
			// 							// debugger
			// 							this.isShow = 2
			// 							rets();
			// 						}
			// 					}
			// 				} else {
			// 					if (!res.data.isMember) {
			// 						// debugger
			// 						this.isShow = 1
			// 						rets();
			// 					} else {
			// 						// debugger
			// 						this.isShow = 2
			// 						rets();
			// 					}
			// 				}

			// 			}

			// 		}).catch(err => {
			// 			this.isShow = 2;
			// 			rets();
			// 			console.log("个人信息错误", err)
			// 		})
			// 	})

			// },
			initUser() {
				this.isShow = 2;
				uni.setStorageSync('registerToast',2)
				this.$apis.accountInfo().then(res => {
					if (res.code == 200) {
						this.proceedSum = res.data.taskNum
						this.activityId = res.activityId;
						this.userObjs = res.data.user;
						this.userObjs.verifier = res.data.user.roles.split(',')[1];
						this.userObjs.Phone = res.data.phone;
						if (res.data.version == this.Version) {

							this.$store.commit('updataArise', true);
						} else {
							this.$store.commit('updataArise', false);
						}
						// debugger
						this.userPhoneApi = res.data.phone;
						this.isMember = res.data.isMember;
						this.needInviteCode = res.data.needInviteCode
						this.imgs = res.data.awardPrivilegeBg;

						if (res.data.needInviteCode) {

							if (res.data.inviteCode) {
								this.inviteCodex = res.data.inviteCode.code;
								if (!res.data.isMember) {
									// debugger
									this.isShow = 0
								} else {
									this.$store.commit('updatauserObj', this.userObjs);
									// debugger
									this.isShow = 2
								}
							}
						} else {
							if (!res.data.isMember) {
								// debugger
								this.isShow = 1
							} else {
								// debugger
								this.isShow = 2
								this.$store.commit('updatauserObj', this.userObjs);
							}
						}

						this.initFansDynamic();

						this.initMyPrivilege();
						this.initMyDynamic();
						this.labelList();
					}

				}).catch(err => {
					this.isShow = 2;
					console.log("个人信息错误", err)
				})

			},
			init() {
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// #endif
			},
			// 请求用户动态数据列表
			initFansDynamic() {
				// /amianfrontend/dynamic/list/{userId}
				let req = {};
				req.pageNum = this.dynamicNum;
				// debugger
				req.pageSize = this.pageSize;
				// ljUrl
				this.$apis.dynamicListId(
					this.userObjs.userId,
					req
				).then(res => {
					if (res.code == 200) {

						if (res.rows.length != 0) {
							let flowListsPush = [];
							let newFlowLists = JSON.parse(JSON.stringify(this.flowLists))
							res.rows.forEach(item => {
								flowListsPush.push({
									page: '../../pages/flour/flourdetails/flourdetails',
									image: item.imageList[0],
									imageList: item.imageList,
									activityId: item.activityId,
									dynamicId: item.dynamicId,
									id: item.dynamicId,
									isTrue: true,
									idx: item.dynamicId,
									// name: item.
								})
							})
							newFlowLists = [...newFlowLists, ...flowListsPush];
							newFlowLists = this.deWeight(newFlowLists);
							this.flowLists = JSON.parse(JSON.stringify(newFlowLists));
							console.log("this.lists请求后的", this.flowLists);
							console.log("userObjs--->", this.userObjs)
							this.loadStatux = '';
							if (res.rows.length < this.pageSize) {


								this.isTrue = false;
								this.loadStatux = 'moduleNomore';

							}
							// debugger
						} else {
							// debugger
							this.isTrue = false;
							this.loadStatux = 'moduleNomore';
							if (this.dynamicNum == 1) {
								// debugger
								this.loadStatux = 'empty';
							}
						}

					}
				})
			},
			// 获取用户标签
			labelList() {
				this.$apis.labelList().then(res => {
					if (res.code == 200) {

						this.labelLists = this.initPro(res.data);
					}
				})
			},
			// 标签格式数据
			initPro(data) {
				let lArrNum = 0;
				let labeMyArr = [];
				let lArr = [];
				let labelArr = [];
				let nextArr = [];
				let Length = 19;
				let newlArr = ''

				// 扁平化自己的标签
				data.forEach((item, index) => {
					// console.log(item)
					item.labelList.forEach((newItem, newIndex) => {
						if (newItem.userLabelId != 0) {
							labeMyArr.push(newItem);
							
						}
					})
				})
				console.log('labeMyArr---->', labeMyArr)
				this.nowLableList = JSON.parse(JSON.stringify(labeMyArr))

				// 初加工标签列表
				labeMyArr.forEach((item, index) => {

					lArr.push(item.label)
					newlArr = lArr.join('').split('');


					let len = 0;
					newlArr.forEach((newItem, newIndex) => {
						// 标签标注化字符 汉字占2个字符 除汉字外的字符串占1个字符
						let isTest = /^[\u4e00-\u9fa5]+$/;
						if (isTest.test(newItem)) {
							len = len + 2;
						} else {
							len++;
						}
					});

					console.log('每个标签标注化====>', item.label, len);
					// 判断该列是否符合标准长度
					if (len > Length) {
						let nextArr01 = lArr.pop();
						nextArr = JSON.parse(JSON.stringify(lArr));
						lArr = [];
						labelArr.push({
							liNum: 0,
							lis: nextArr
						});
						console.log('超出的单个标签 重新组一行----->', nextArr01)
						lArr.push(nextArr01);

						if (index == labeMyArr.length - 1) {
							labelArr.push({
								liNum: 0,
								lis: lArr
							});
						}
						// debugger

					} else {

						if (index == labeMyArr.length - 1) {
							nextArr = JSON.parse(JSON.stringify(lArr));

							console.log('满足标准行的长度 index------>', index, labeMyArr.length - 1, nextArr)
							labelArr.push({
								liNum: 0,
								lis: nextArr
							});
						}
					}
				});



				// 每行字体的设置处理
				let maxSum = labelArr.length % 2 == 0 ? (labelArr.length / 2 + 1) : (labelArr.length + 1) / 2;
				// let newLists = [];
				labelArr.forEach((item, index) => {
					let newIndex = index + 1;
					if (maxSum == newIndex) {
						item.liNum = 0;
					} else if (newIndex > maxSum) {
						item.liNum = 2 * (newIndex - maxSum);
					} else if (newIndex < maxSum) {
						item.liNum = 2 * (maxSum - newIndex) - 1;
					}
				})
				let newLabelArr = JSON.parse(JSON.stringify(labelArr))
				console.log('最后生成的标签列表------>', newLabelArr);
				// console.log('一共有多少条标签---->', lArrNum)
				return newLabelArr;

			},
			ffChacha() {
				this.isPopup = false;
			},
			goCancel() {
				uni.navigateTo({
					url: "myCancel/index"
				})
			},
			goMyFans(index) {
				// this.initObj().then(res => {
					// debugger
					this.isShow = Number(uni.getStorageSync('registerToast'));
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "myFans/myFans?followIndex=" + index
						})
					}

				// })

			},
			goLabel() {
				// this.initObj().then(res => {
					// debugger
					this.isShow = Number(uni.getStorageSync('registerToast'));
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "label/label?isTrue=" + true
						});
					}

				// })

			},
			initMyPrivilege() {
				this.$apis.privilegeOwnerList(this.myPrivilegePageSize, this.myPrivilegePageNum).then(res => {

					console.log(res)
					let newList = [];
					if (res.rows.length != 0) {
						res.rows.forEach(item => {
							// debugger
							
							// 判断我的特权是否过期
							let newItem = JSON.parse(JSON.stringify(item));
						
								if(newItem.expiresTime == "null"){
									newItem.isPass = true;
									newItem.isText = '永久';
								}else{
									let newExpiresTime = new Date(newItem.expiresTime);
									console.log('newExpiresTime--->',newExpiresTime)
									let nowExpiresTime = newExpiresTime.getTime();
									let nowDate = new Date();
									let nowTime = nowDate.getTime();
									if((nowExpiresTime - nowTime) <= 0){
										newItem.isPass = false;
									}else{
										newItem.isPass = true;
									}
									let m = newExpiresTime.getMonth()+1 < 10 ? `0${newExpiresTime.getMonth()+1}` : newExpiresTime.getMonth()+1;
									let d = newExpiresTime.getDate() < 10 ? `0${newExpiresTime.getDate()}` : newExpiresTime.getDate();
									newItem.isText = `${m}/${d}`;
									
								}
							
							
							
							newList.push(newItem)
						})
						if (newList.length == 1) {
							newList = [...newList, null, null, null]
						} else if (newList.length == 2) {
							newList = [...newList, null, null]
						} else if (newList.length == 3) {
							newList = [...newList, null]
						}
						this.myCoupon = JSON.parse(JSON.stringify(newList));
					} else {
						this.myCoupon =  [null, null, null, null]
					}
					console.log('this.myCoupon------>', this.myCoupon)

				})
			},
			goMyPrivilege() {
				// this.initObj().then(res => {
					// debugger
					this.isShow = Number(uni.getStorageSync('registerToast'));
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "myPrivilege/myPrivilege"
						})
					}

				// })

			},
			goParticipate() {

				// this.initObj().then(res => {
					// debugger
					this.isShow = Number(uni.getStorageSync('registerToast'));
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "participate/participate"
						})
					}

				// })
			},
			goMyDynamic() {
				// this.initObj().then(res => {
					// debugger
					this.isShow = Number(uni.getStorageSync('registerToast'));
					if (this.isShow == 2) {
						uni.navigateTo({
							url: `myDynamic/myDynamic`
						})
					}

				// })

			},

			goMyTask() {
				// this.initObj().then(res => {
					// debugger
					this.isShow = Number(uni.getStorageSync('registerToast'));
					if (this.isShow == 2) {
						uni.navigateTo({
							url: "myTask/myTask"
						})
					}

				// })

			}



		}
	}
</script>

<style lang="scss" scoped>
	.demo-warter {
		// border-radius: 8px;
		margin-bottom: 4rpx;

		position: relative;
	}

	.warter-left {
		margin-right: 4rpx;
	}


	.islogin {
		background: #2d3034;
		border-radius: 12rpx;
		width: 670rpx;
		height: 240rpx;
	}

	.islogin_ {
		margin: 0 40rpx;
	}

	.islogin_image {
		margin-top: 40rpx;
		margin-right: 30rpx;
		width: 160rpx;
		height: 160rpx;
		display: inline-block;
		vertical-align: top;
	}

	.islogin_title {
		display: inline-block;
		font-size: 30rpx;
		color: #ffffff;
		font-weight: 700;
		line-height: 240rpx;
	}

	.my {
		.content {
			margin: 0 40rpx 0 40rpx;
		}

		.bg_top {
			width: 750rpx;
			background-color: #ffffff;
			position: fixed;
			z-index: 9;
		}

		._top {
			width: 750rpx;
		}

		._top_title {
			width: 750rpx;
			font-size: 56rpx;
			font-weight: 700;
			color: #040000;
			line-height: 60rpx;
			padding: 1rpx 0 14rpx 40rpx;
			position: fixed;
		}

		.z_index {
			z-index: 10;
		}


		.task {
			margin-top: 20rpx;
			/* width: 634rpx; */
			height: 100rpx;
			background: #f0f1f2;
			border-radius: 6px;
			color: #FFFFFF;
			line-height: 100rpx;
			/* padding-left: 36rpx; */
			position: relative;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			align-items: center;

		}

		.taskTop {
			display: flex;
			align-items: center;

			.Top01 {
				font-size: 26rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: LEFT;
				color: #2d3034;
			}

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 6rpx;

			}
		}

		.taskBottom {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				// position: absolute;
				// right: 20rpx;
				// top: 34rpx;
			}

			.Bottom01 {
				display: inline-block;
				font-size: 24rpx;
				font-family: nominal;
				font-weight: 400;
				text-align: LEFT;
				color: #ffffff;
				width: 38rpx;
				height: 38rpx;
				line-height: 38rpx;
				text-align: center;
				opacity: 1;
				background: #ff4341;
				border-radius: 50%;
				margin-right: 4rpx;
			}
		}


		.follow {
			position: relative;
			width: 670rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: #2d3034;
			font-size: 26rpx;
			background: #f0f1f2;
			border-radius: 6px;
			margin-top: 20rpx;
		}

		.follow_ {
			display: inline-block;
			width: 294rpx;
			padding-left: 40rpx;
			position: relative;
		}

		.follow_ text {
			position: absolute;
			right: 30rpx;


			font-size: 30rpx;
			font-family: nominal;
			font-weight: SemiBold;
			color: #2d3034;
		}

		.hr {
			display: inline-block;
			height: 36rpx;
			width: 2rpx;
			background: #e1e3e5;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}

		.fans {
			position: relative;
			width: 294rpx;
			padding-left: 40rpx;
			display: inline-block;
		}

		.fans text {
			position: absolute;
			right: 44rpx;
			font-size: 30rpx;
			font-family: nominal;
		}

		.privilege {
			width: 670rpx;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			position: relative;
			display: flex;
			align-items: center;
		}

		.privilege_image {
			display: inline-block;
			vertical-align: top;
			display: flex;
		}

		.privilege_image image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 22rpx;
		}

		.privilege_title {
			display: inline-block;
			color: #2d3034;
			font-size: 34rpx;
			font-weight: 700;
			vertical-align: top;
		}

		.privilege_image_ {
			display: inline-block;
			vertical-align: top;
			position: absolute;
			top: 5rpx;
			right: 0;
			display: flex;
		}

		.privilege_image_ image {
			width: 32rpx;
			height: 32rpx;
		}

		.label {
			margin-top: 60rpx;
		}

		.privilege_label {
			display: inline-block;
			width: 8rpx;
			height: 34rpx;
			background: #f10200;
			margin-right: 14rpx;
		}

		.my_label {
			// margin-top: 14rpx;
			font-weight: 800;
		}

		.my_label {}

		.my_label span {
			display: inline-block;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background-color: #000000;
			margin: 0 10rpx;

		}

		.my_label_ {
			// margin-top: 16rpx;
			display: flex;
			align-items: center;

		}

		.my_label1 {
			font-size: 44rpx;
		}

		.my_label2 {
			font-size: 62rpx;
		}

		.my_label3 {
			font-size: 72rpx;
		}

		.my_label4 {
			font-size: 54rpx;
		}

		.my_label5 {
			font-size: 36rpx;
		}

		.conBox {
			text-align: center;
			padding-top: 60rpx;
		}

		.conBoxTitle {
			font-size: 44rpx;
			font-weight: 700;
		}

		.conBoxText {
			margin-top: 20rpx;
			font-size: 34rpx;
			text-align: left;
			line-height: 48rpx;
			/* text-indent: 15rpx; */
			height: 260rpx;
			overflow-y: scroll;
			word-wrap: break-word;
			word-break: break-all;
			display: flex;
		}



		.popBox {
			width: 620rpx;
			height: 774rpx;
			background-color: #fff;
			position: relative;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
		}

		.popCha {
			z-index: 99;
			width: 80rpx;
			position: absolute;
			top: 15rpx;
			right: 15rpx;
		}

		.conBoxImg {
			width: 320rpx;
		}

		.dot {
			filter: grayscale(100%);
			filter: gray;
		}

		.my_header {
			width: 100%;
			position: relative;

			.my_headerbgimg {
				width: 100%;
				height: 225rpx;
			}

			.my_headericon {
				width: 324rpx;
				height: 60rpx;
				// height: 88rpx;
				position: absolute;
				z-index: 9;
				left: 32rpx;
			}
		}

		.my_bodys {
			width: 100%;
			height: 628rpx;
			display: flex;
			box-sizing: border-box;
		}

		.my_bodyLeft {
			flex: 1;
			width: 212rpx;
			margin-right: 16rpx;
			background-color: #f4f2ef;
			border-radius: 16rpx;
			overflow: hidden;
		}

		.my_bodyRight {
			flex: 2;
			height: 100%;
			box-sizing: border-box;
		}

		.my_bodyRightTop {
			background-color: #f4f2ef;
			height: 336rpx;
			box-sizing: border-box;
			padding: 14rpx;
			border-radius: 16rpx;
		}

		.my_bodyRightBottom {
			background-color: #f4f2ef;
			margin-top: 16rpx;
			height: 276rpx;
			padding: 14rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			position: relative;
			padding-bottom: 55rpx;
		}

		// <view class="my_bodyLeftItem">
		// 	<image src="../../static/我的%20_slices/组%203152@3x.png"></image>
		// 	<image src="../../static/我的%20_slices/dian.png"></image>
		// </view>
		// <view class="my_bodyLeftItem">
		// 	<view class="my_bodyLeftItemTlite">粒上皇甘小栗</view>
		// 	<view class="my_bodyLeftItemText">Grain King Chestnut</view>
		// 	<view class="my_bodyLeftItemDate">
		// 		<span class="my_bodyLeftItemDateLeft">有效期至</span>
		// 		<span>12/31</span>
		// 	</view>
		// </view>
		.my_bodyLeftItemDate {
			float: right;
			height: 36rpx;

			span {
				display: inline-block;

				font-size: 16rpx;
				font-family: PingFang SC;
				font-weight: 600;

				color: #020604;
			}
		}
		.newrecommend_leftboxboard{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: rgba(0, 0, 0, 0.39);
			display: flex;
			align-items: center;
		}
		.newrecommend_leftboxboardtitle{
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			color: #fff;
			width: 100%;
			text-align: center;
		}

		.my_bodyLeftItemDateLeft {
			height: 22rpx;
			font-size: 16rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 16rpx;
			color: #83898D !important;
			margin-right: 8rpx;
		}

		.my_bodyLeftItemText {
			height: 41rpx;
			font-size: 16rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 22rpx;
			color: #020604;
			margin-top: 6rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.my_bodyLeftItemTlite {
			height: 28rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 28rpx;
			color: #020604;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
		}

		.my_bodyLeftItemKong {
			text-align: center;
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			color: #83898d;
		}

		.my_bodyLeftItem {
			padding:19rpx 16rpx;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			height: 142rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.my_bodyLeftItemFist {
			height: 65rpx;
			display: flex;
			align-items: start;
			flex-direction: column;
		}
		.my_bodyLeftItemBorderTop{
			position: absolute;
			bottom: 0;
			left: 0;
			top: 0;
		}
 
		.my_bodyLeftItemBorder {
			width: 100%;
			border-bottom: 3rpx dashed #C5C6C3;
			position: absolute;
			bottom: 0;
			left: 0;

			&::after {
				content: '';
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				top: -12rpx;
				left: -12rpx;
			}

			&::before {
				content: '';
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				top: -12rpx;
				right: -12rpx;
			}
		}
		.my_bodyLeftItemBorderTop{
			width: 100%;
			border-bottom: 3rpx dashed #C5C6C3;
			position: absolute;
			top: 0;
			left: 0;
			
			&::after {
				content: '';
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				top: -12rpx;
				left: -12rpx;
			}
			
			&::before {
				content: '';
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				top: -12rpx;
				right: -12rpx;
			}
		}

		.my_bodyLeftItemFistbox {
			display: flex;
			justify-content: space-between;
			position: relative;
			top: -6rpx;

			view {
				display: flex;
				align-items: center;
			}
		}

		.my_bodyLeftItemFistanniu {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 16rpx;
			top: 10rpx;
		}

		.my_bodyLeftItemFistTitle {
			height: 28rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 28rpx;
			color: #020604;
			margin-left: 8rpx;
		}
	}

	.swiper-item_box_imgbox {
		width: 200rpx;
		position: relative;

		.swiper-item_box_imgboxitem {
			width: 200rpx;
			height: 200rpx;
			box-sizing: border-box;
			display: block;
		}

		.swiper-item_box_imgboxitem_tltlebox {
			width: 80rpx;
			height: 80rpx;
			background: -webkit-linear-gradient(-45deg, #c4292b 50%, #f4f2ef 50% 100%);
			position: absolute;
			bottom: 0;
			right: 0;

		}

		.swiper-item_box_imgboxitem_tltleboxtext {
			display: inline-block;
			transform: rotateZ(-45deg);
			width: 48rpx;
			height: 48rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 28rpx;
			color: #FFFFFF;
			position: absolute;
			top: 10rpx;
			left: 10rpx;
			text-align: center;
		}


	}

	.swiper-item_box {
		display: inline-block;
		width: 200rpx;
		box-sizing: border-box;
	}

	.swiper-item_box_title {
		display: inline-block;
		width: 100%;
		height: 28rpx;
		font-size: 10px;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 28rpx;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis; //文本溢出显示省略号
		white-space: nowrap; //文本不会换行
		margin-top: 6rpx;
	}

	.swiper-item_box_furitle {
		height: 20rpx;
		font-size: 12rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 20rpx;
		color: #BBBBBB;
		overflow: hidden;
		text-overflow: ellipsis; //文本溢出显示省略号
		white-space: nowrap; //文本不会换行
	}

	.my_bodyRightTopTophuis {
		color: #83898D !important;
		margin-left: 8rpx;
	}

	.my_bodyRightTopTop {
		display: flex;
		align-items: center;

		span {
			display: inline-block;
			height: 28rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 28rpx;
			color: #020604;
		}
	}

	.my_bodyRightTopTopone {
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-bottom: 8rpx;

		.my_bodyLeftItemFistanniu {
			top: 0;
		}
	}
	.my_bodyRightBottss{
		margin-bottom: 0rpx;
	}

	.my_bodyRightTopTopImg {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.my_bodyRightTopBottom {
		display: flex;
		justify-content: space-between;
	}

	.mylabels_addbox {
		width: 180rpx;
		height: 44rpx;
		background: rgba(255, 255, 255, 0.39);
		border: 2rpx solid #C4292B;
		opacity: 1;
		border-radius: 46rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		position: absolute;
		right: 5rpx;
		bottom: 5rpx;
	}

	.mylabels_addimg {
		width: 24rpx;
		height: 24rpx;
	}

	.mylabels_addtext {
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 28rpx;
		color: #020604;
	}

	.mylabelbox {
		width: 100%;
		height: 83%;
		overflow: hidden;
		margin-right: 8rpx;
		// background-color: red;
	}

	.mylabels {
		display: inline-block;
		float: left;

		span {
			display: inline-block;
		}
	}

	.mylabelsitem {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 44rpx;
	}

	.mylabels_red {
		width: 24rpx;
		height: 24rpx;
		background: #C4292B;
		opacity: 1;
		border-radius: 50%;
		margin-right: 5rpx;
	}
	.swiper-item_boxkong{
		text-align: center;
		width: 220rpx;
		height: 286rpx;
		line-height: 286rpx;
		color: #83898d;
	}
	.mylabelboxkong{
		text-align: center;
		width: 100%;
		height: 180rpx;
		line-height: 180rpx;
		color: #83898d;
	}
</style>
